<template>
    <div>

        <scroller class="content" scroll-direction="horizontal" >
            <image style="width:1708px;height:1207px;" src="../../resource/img/map.jpg"></image>
            <!--高考后职场体验-->
            <div class="class" style="top: 200px;left: 200px;" @click="showPopFunc"></div>
            <!--青春足迹-->
            <div class="class" style="top: 306px;left: 396px;" @click="showPopFunc"></div>
            <!--走进梦想系列活动-->
            <div class="class" style="top: 340px;left: 530px;" @click="showPopFunc"></div>
            <!--青春约见-->
            <div class="class" style="top: 245px;left: 580px;" @click="showPopFunc"></div>
            <!--继光志愿行动-->
            <div class="class" style="top: 270px;left: 694px;" @click="showPopFunc"></div>
            <!--春考自招面试辅导-->
            <div class="class" style="top: 366px;left: 932px;height: 50px;" @click="showPopFunc"></div>
            <!--研究型学习报告-->
            <div class="class" style="top: 414px;left: 1019px;" @click="showPopFunc"></div>
            <!--高考志愿指导讲座-->
            <div class="class" style="top: 350px;left: 1102px;" @click="showPopFunc"></div>

            <!--校园职场体验-->
            <div class="class" style="top: 626px;left: 144px;" @click="showPopFunc"></div>
            <!--暑期职业小达人-->
            <div class="class" style="top: 615px;left: 261px;" @click="showPopFunc"></div>
            <!--继光志愿行动-->
            <div class="class" style="top: 546px;left: 458px;" @click="showPopFunc"></div>
            <!--走进梦想系列活动-->
            <div class="class" style="top: 502px;left: 640px;" @click="showPopFunc"></div>
            <!--青春足迹-->
            <div class="class" style="top: 623px;left: 586px;" @click="showPopFunc"></div>
            <!--青春约见-->
            <div class="class" style="top: 540px;left: 750px;height: 60px;width: 120px;" @click="showPopFunc"></div>
            <!--青春学记-->
            <div class="class" style="top: 627px;left: 745px;" @click="showPopFunc"></div>
            <!--六门选课学科探索-->
            <div class="class" style="top: 670px;left: 996px;" @click="showPopFunc"></div>
            <!--研拓课程选修科目-->
            <div class="class" style="top: 640px;left: 1103px;" @click="showPopFunc"></div>


            <!--校园职场体验-->
            <div class="class" style="top: 823px;left: 105px;" @click="showPopFunc"></div>
            <!--暑期职业小达人-->
            <div class="class" style="top: 838px;left: 214px;" @click="showPopFunc"></div>
            <!--继光志愿行动-->
            <div class="class" style="top: 846px;left: 394px;" @click="showPopFunc"></div>
            <!--走进梦想系列活动-->
            <div class="class" style="top: 864px;left: 518px;width: 80px;" @click="showPopFunc"></div>
            <!--青春足迹-->
            <div class="class" style="top: 800px;left: 572px;height: 50px;" @click="showPopFunc"></div>
            <!--青春约见-->
            <div class="class" style="top: 870px;left: 654px;" @click="showPopFunc"></div>
            <!--青春学记-->
            <div class="class" style="top: 795px;left: 758px;" @click="showPopFunc"></div>
            <!--六门选课体验学习-->
            <div class="class" style="top: 856px;left: 955px;height: 60px;" @click="showPopFunc"></div>
            <!--研拓课程微型科目-->
            <div class="class" style="top: 876px;left: 1103px;" @click="showPopFunc"></div>
            <!--研拓课程选修科目-->
            <div class="class" style="top: 910px;left: 906px;width: 60px;" @click="showPopFunc"></div>

            <div class="bg-transparent" v-if="showPop" @click="closePop">
            </div>
            <div class="pop" v-if="showPop">
                <image  style="width:528px;height:504px;" src="../../resource/img/map-pop.png"></image>
                <text class="text">继光志愿行动：这是高考改革后，继光高中制定的志愿行动“根茎叶”计划，指导各年级分层分阶段开展志愿服务工作。</text>
                <text class="more">了解更多</text>
                <image style="width: 80px;height: 80px;position: absolute;bottom: -100px;left: 224px" src="../../resource/img/close.png"></image>
            </div>
            <AppHeader :title="headerTitle" :showBack=true></AppHeader>
        </scroller>
    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                navList:[],
                headerTitle:"探索地图",
                showPop:false
            }
        },
        created(){
            let self=this;
        },
        methods: {
            closePop:function(){
                console.log(this.showPop)
                this.showPop=false;
            },
            showPopFunc:function(){
                console.log("showPop:"+this.showPop);

                this.showPop=true;
            },
            clickTabItem:function(item){

            },
            clickAppNavItem:function(item){
                this.jump(item.link);
            }
        }
    }
</script>

<style scoped>
    .content{
        margin-top: 88px;
        width:1708px;
        height:1207px;
    }
    .class{
        position: absolute;
        /*background-color: rgba(255,255,255,.6);*/
        width: 100px;
        height: 100px;
    }

      .bg-transparent{
        width: 750px;
        height: 1246px;
        background-color:rgba(0,0,0,.5);
        top:88px;
        position: fixed;
    }
    .pop{
        position: fixed;
        top: 400px;
        left: 110px;
        width:528px;
        height:504px;
    }
     .text{
        font-size: 24px;
        color: #ffffff;
        line-height: 36px;
        position: absolute;
        top: 122px;
        left: 124px;
        width: 286px;
    }
    .more{
        bottom: 60px;
        color: #42b7ff;
        left: 207px;
        font-size: 28px;
    }

</style>